<template>
  <c-main-template minHeight="auto" :isBreadcrumb="false">
    <el-row :gutter="24" class="pd-lg">
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">车架号：</div>
          <el-input
            size="large"
            placeholder="请输入车架号"
            v-model="querys.vin"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">放款日期：</div>
          <el-date-picker
            v-model="querys.time"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="large"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">销售申请单单号：</div>
          <el-input
            size="large"
            placeholder="请输入销售申请单单号"
            v-model="querys.innerId"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="3">
        <div class="flex-x-end">
          <el-button size="large" @click="handleReset">重 置</el-button>
          <el-button size="large" type="primary" @click="handleSelect"
            >查 询</el-button
          >
        </div>
      </el-col>
      <el-col :span="7" class="mt-lg">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">授信银行：</div>
          <el-select
            v-model="querys.bankId"
            size="large"
            class="wh flex-1 mr-lg"
            placeholder="请选择授信银行"
          >
            <el-option
              v-for="item in bankList"
              :key="item.id"
              :label="item.bankName"
              :value="item.id"
            />
          </el-select>
        </div>
      </el-col>
      <el-col :span="7" class="mt-lg">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">订单号：</div>
          <el-input
            size="large"
            placeholder="请输入订单号"
            v-model="querys.orderId"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
    </el-row>
  </c-main-template>
  <c-main-template
    v-loading="loading"
    class="mt-lg"
    minHeight="auto"
    title="贷款"
    :isBreadcrumb="false"
  >
    <template #operate>
      <el-button size="large" type="primary" @click="handleBatchRepayment"
        >批量还款</el-button
      >
    </template>
    <c-table-template
      :data="tableData"
      @selection-change="handleSelectionChange"
      ref="multipleTableRef"
      :row-key="getRowKey"
    >
      <el-table-column
        type="selection"
        align="center"
        width="55"
        :selectable="onCheckSelectable"
        :reserve-selection="true"
      />
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column label="车辆信息" align="center" min-width="350">
        <template #default="scope">
          <span v-for="(item, index) in k" :key="index">
            {{ scope.row[item] }}&nbsp;
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="车架号"
        prop="vin"
        align="center"
        min-width="220"
      />
      <el-table-column
        label="销售申请单单号"
        prop="innerId"
        align="center"
        min-width="220"
      />
      <el-table-column
        label="授信银行"
        prop="bankName"
        align="left"
        min-width="220"
      />
      <el-table-column label="授信利率" align="center" width="100">
        <template #default="scope"> {{ scope.row.interestRate }} % </template>
      </el-table-column>
      <el-table-column label="贷款金额(元)" align="center" width="200">
        <template #default="scope">
          {{ filters.thousands(scope.row.principal) }}
        </template>
      </el-table-column>
      <el-table-column label="利息(元)" align="center" width="100">
        <template #default="scope">
          {{ filters.thousands(scope.row.interest) }}
        </template>
      </el-table-column>
      <el-table-column label="放款日期" align="center" width="200">
        <template #default="scope">
          {{ filters.dateYMDHMSFormat(scope.row.timeLoan) }}
        </template>
      </el-table-column>
      <el-table-column label="还款日期" align="center" width="200">
        <template #default="scope">
          {{ filters.dateYMDHMSFormat(scope.row.timeRepayment) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="200">
        <template #default="scope">
          {{ getStatusLabel(loanBillType, scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="150">
        <template #default="scope">
          <el-button
            link
            class="mr-sm"
            type="primary"
            size="small"
            @click="handleRepayment(scope.row)"
          >
            <span v-if="scope.row.status === 0">还款</span>
            <span v-else>查看还款凭证</span>
          </el-button>
        </template>
      </el-table-column>
    </c-table-template>
    <div class="flex-x-end pd-20">
      <c-page-template
        :total="total"
        :querys="querys"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <c-repayment ref="cRepaymentRef" @change="onPaymentSuccess" />
  </c-main-template>
</template>
<script setup>
const k = ["brand", "series", "model"];
import { ref, onMounted, getCurrentInstance, computed } from "vue";
import cRepayment from "./components/Repayment.vue";
import { useBasicsTable } from "@/hooks/useTable.js";
import { ElMessage } from "element-plus";
import { loanBillType, getStatusLabel } from "@/utils/status.js";
import { useRoute } from "vue-router";
const route = useRoute();
const { proxy } = getCurrentInstance();
const bankList = ref([]);
const cRepaymentRef = ref();
const multiples = ref([]);
const multipleTableRef = ref();
onMounted(() => {
  const url = "/sellerCreditAmountApply/bankList?status=0";
  proxy.$get({ url }).then((res) => {
    bankList.value = res;
  });
  const item = route.query;
  if (item && item.key && item.key * 1 === 0) {
    if (item.bankId) {
      querys.value.bankId = item.bankId;
      delete route.query.bankId;
    }
    if (item.orderId) {
      querys.value.orderId = item.orderId;
      delete route.query.orderId;
    }
    delete route.query.key;
  }
});
const getRowKey = (item) => {
  return item.id;
};
const onPaymentSuccess = () => {
  if (multiples.value.length > 0) {
    multiples.value = [];
    multipleTableRef.value.tableRef.clearSelection();
  }
  tableList();
};
const handleSelectionChange = (item) => {
  multiples.value = item;
};
const handleBatchRepayment = () => {
  if (multiples.value.length <= 0) {
    ElMessage.warning("请选择批量项");
    return;
  }
  cRepaymentRef.value.handleOpen(multiples.value, 1);
};
const handleRepayment = (item) => {
  cRepaymentRef.value.handleOpen([item], 0);
};
const onCheckSelectable = (item) => {
  if (item.status === 0) {
    // 未还款
    return true;
  }
  return false;
};
const handleReset = () => {
  querys.value = {
    current: 1,
    size: 10,
  };
  if (multiples.value.length > 0) {
    multiples.value = [];
    multipleTableRef.value.tableRef.clearSelection();
  }
  tableList();
};
const {
  querys,
  tableData,
  total,
  loading,
  tableList,
  handleSelect,
  handleSizeChange,
  handleCurrentChange,
} = useBasicsTable({
  url: "/sellerLoan/pageSeller",
  getParams: () => {
    const params = {};
    if (querys.value.time && querys.value.time.length > 0) {
      params.startTime = querys.value.time[0];
      params.endTime = querys.value.time[1];
      params.time = null;
    }
    return params;
  },
});
</script>
